<template>
  <div class="index">
    <headerBar v-if="title" :title="title"></headerBar>
    <div class="main">
      <router-view></router-view>
    </div>
    <footer-nav v-if="hasFixedBar"></footer-nav>
  </div>
</template>
<script>
import footerNav from "@/components/navigation/footer_nav";
import headerBar from "@/components/navigation/header_bar";
export default {
  name: "AppIndex",
  data() {
    return {};
  },
  methods: {},
  components: {
    footerNav,
    headerBar
  },
  computed: {
    hasFixedBar() {
      return (this.$route.meta && this.$route.meta.fixedBar) || false;
    },
    title() {
      return this.$route.meta && this.$route.meta.title;
    }
  }
};
</script>
<style scoped>
.index {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

.main {
  flex: 1;
  overflow: auto;
}

.footer {
  height: 1.2rem;
}

.yd-tabbar-active {
  color: rgb(9, 187, 7) !important;
}
</style>
